<template>
  <div class="dictionary">
    <h3>系统字典</h3>
    <div class="tabs">
      <el-tabs type="border-card">
        <el-tab-pane label="未入库设备状态">
          <el-table :data="tableData1" style="width: 100%">
            <el-table-column align="center" prop="id" label="编号">
            </el-table-column>
            <el-table-column align="center" prop="name" label="名称">
            </el-table-column>
            <el-table-column align="center" prop="color" label="颜色">
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="已入库设备状态">
          <el-table :data="tableData2" style="width: 100%">
            <el-table-column align="center" prop="id" label="编号">
            </el-table-column>
            <el-table-column align="center" prop="name" label="名称">
            </el-table-column>
            <el-table-column align="center" prop="color" label="颜色">
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="设备分类">
          <el-table :data="tableData3" style="width: 100%">
            <el-table-column align="center" prop="id" label="编号">
            </el-table-column>
            <el-table-column align="center" prop="name" label="名称">
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  name: "DataDictionary",
  data() {
    return {
      tableData1: [{
        id: 'STATUS1',
        name: '未审核',
        color: 'red'
      }, {
        id: 'STATUS2',
        name: '已审核',
        color: 'green'
      }],
      tableData2: [{
        id: 'STATUS3',
        name: '闲置中',
        color: '#67C23B'
      }, {
        id: 'STATUS4',
        name: '使用中',
        color: '#198900'
      }, {
        id: 'STATUS5',
        name: '维修中',
        color: '#CCC'
      }, {
        id: 'STATUS6',
        name: '报废中',
        color: 'red'
      }],
      tableData3: [{
        id: 'CATE1',
        name: '房屋及构筑物',
        
      }, {
        id: 'CATE2',
        name: '仪器仪表',
        
      }, {
        id: 'CATE3',
        name: '机电设备',
        
      }, {
        id: 'CATE4',
        name: '卫生医疗器械',
       
      },
      {
        id: 'CATE5',
        name: '文体设备11111',
        
      }, {
        id: 'CATE6',
        name: '文物及陈列品',
        
      }, {
        id: 'CATE7',
        name: '图书',
       
      }, {
        id: 'CATE8',
        name: '工具、量具和器皿',
        
      },
      {
        id: 'CATE9',
        name: '行政办公设备',
        
      }
      ]
    }
  },
}
</script>


<style lang="less" scoped>
h3 {
  font-size: 20px;
  margin: 20px;
}

.tabs {
  margin: 0 20px;
}
</style>